<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link th:href="@{/erp/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/erp/css/style.css}"/>
    <link th:href="@{/erp/assets/css/codemirror.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/erp/assets/css/ace.min.css}"/>
    <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome.min.css}"/>
    <script th:src="@{/erp/assets/js/jquery.min.js}"></script>
    <script th:src="@{/erp/assets/js/bootstrap.min.js}"></script>
    <!-- page specific plugin scripts -->
    <script th:src="@{/erp/assets/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.dataTables.bootstrap.js}"></script>
    <script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/erp/assets/laydate/laydate.js}" type="text/javascript"></script>
    <title>货区管理</title>
</head>
<body>
<div class="page-content clearfix">
    <div id="Member_Ratings">
        <div class="d_Confirm_Order_style">
            <div class="search_style">
                <form id="formData" action="/area/cargoArea_manage" method="post">
                <ul class="search_content clearfix">
                    <li>
                        <label class="l_f">仓库名称</label>
                        <select name="wid" id="warehouseName" onchange="getAreaByWid()" style="margin-left:10px;">
                            <option value="" selected disabled>--请选择仓库--</option>
                        </select>
                    </li>
                    <li>
                        <label class="l_f">货区名称</label>
                        <select name="aid" id="areaName" style="margin-left:10px;">
                            <option value="" selected disabled >--请选择货区--</option>
                        </select>
                    </li>
                    <li>
                        <label class="l_f">创建时间</label>
                        <input class="inline laydate-icon" name="cTime" id="start" style=" margin-left:10px;">
                    </li>
                    <li style="width:90px;">
                        <button id="btn" type="button" class="btn_search"><i class="icon-search"></i>查询</button>
                    </li>
                </ul>
                </form>
            </div>
            <!---->
            <div class="border clearfix"><span class="l_f"> <a href="javascript:;" id="property_add"
                                                               class="btn btn-warning"><i class="icon-plus"></i>新增货区</a> </span>
            </div>
            <!---->
            <div class="table_menu_list">
                <table class="table table-striped table-bordered table-hover" id="sample-table">
                    <thead>
                    <tr>
                        <th width="100px">序号</th>
                        <th width="120px">货区编号</th>
                        <th width="120px">货区名称</th>
                        <th width="120px">所属仓库</a></th>
                        <th width="120px">负责人</th>
                        <th width="120px">货架数目</th>
                        <th width="120px">货位数目</th>
                        <th width="250px">描述</th>
                        <th width="180px">创建时间</th>
                        <th width="70px">状态</th>
                        <th width="200px">操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


</body>
</html>
<script>
    laydate({
        elem: '#start',
        event: 'focus'
    });
    jQuery(function ($) {
        $.ajax({
            url: '/warehouse/list',
            type: 'post',
            success: function (res) {
                for (var i = 0; i < res.length; i++) {
                    $("#warehouseName").append('<option value="' + res[i].id + '">' + res[i].warehouseName + '</option>')
                }
            }
        })

        var table = $('#sample-table').DataTable({
            aLengthMenu: [5, 10, 15, 20, 50, 100], //更改显示记录数选项
            "ordering": false,
            bFilter: false, //是否启动过滤、搜索功能
            iDisplayLength: 5, //默认显示的记录数
            "serverSide": true, // true表示使用后台分页
            cache:false,
            "bStateSave": false,//状态保存
            'autoWidth': true,
            "ajax": {
                "url": "/area/cargoArea_manage",  // 异步传输的后端接口url
                "type": "POST",
                dataSrc: "data",
                data: function (d) {
                    var param = {};
                    param.draw = d.draw;
                    param.start = d.start;
                    param.length = d.length;
                    var formData = $("#formData").serializeArray();//把form里面的数据序列化成数组
                    formData.forEach(function (e) {
                        param[e.name] = e.value;
                    });
                    return param;//自定义需要传递的参数。
                },
            },
            "columns": [
                {"data": "id"},
                {"data": "areaNo"},
                {"data": "areaName"},
                {"data": "warehouse.warehouseName", defaultContent: ""},
                {"data": "warehouse.warehousePerson", defaultContent: ""},
                {"data": "shelfNum"},
                {"data": "csNum"},
                {"data": "areaRemark"},
                {"data": "createTime"},
                {
                    "data": "areaStatus",
                    "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == '1') {
                            var span = $('<span></span>').text("已启用").addClass("label label-success radius");
                            $(td).empty().addClass("td-status").append(span);
                        } else {
                            var span = $('<span></span>').text("已停用").addClass("label label-defaunt radius");
                            $(td).empty().addClass("td-status").append(span);
                        }
                    }
                },
                {
                    "data": "areaStatus",
                    "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == '1'){
                            var a = $('<a onClick="member_stop(this, \''+rowData.id+'\')" href="javascript:;" title="停用" class="btn btn-xs btn-success"><i class="icon-ok bigger-120"></i></a> <a title="编辑" value="' + row + '"   class="btn btn-xs btn-success  property_edit"><i class="icon-edit bigger-120"></i></a>');
                            $(td).empty().addClass("td-manage").append(a);
                        }else {
                            var a = $('<a onClick="member_start(this, \''+rowData.id+'\')" href="javascript:;" title="启用" class="btn btn-xs "><i class="icon-ok bigger-120"></i></a> <a title="编辑" value="' + row + '"   class="btn btn-xs btn-success  property_edit"><i class="icon-edit bigger-120"></i></a>');
                            $(td).empty().addClass("td-manage").append(a);
                        }
                    }
                }
            ]
        });


        //新增库区
        $('#property_add').on('click', function () {
            layer.open({
                type: 2,
                title: '添加库区',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['893px', '600px'],
                content: '/warehouse/cargoArea_manage/cargoArea_addPage'
            });
        })


        //修改库区
        $('table').on('click', '.property_edit', function () {
            var index = $(this).attr('value');
            var data = table.row(index).data();
            console.log(data);
            layer.open({
                type: 2,
                title: '编辑库区',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['893px', '600px'],
                content: '/warehouse/cargoArea_manage/cargoArea_updatePage?' + $.param(data)
            });
        })


        $("#btn").click(function () {
            table.ajax.reload();
        });
    })
    //仓库联动库区
    function getAreaByWid() {
        var wId = $("#warehouseName").find("option:selected").val();
        $("#areaName").empty();
        $.post("/area/listByWid", {warehouseId : wId}, function (mydata) {
            $("#areaName").append('<option value="" selected disabled>--请选择货区--</option>');
            for (var i = 0; i < mydata.length; i++) {
                $("#areaName").append('<option value="' + mydata[i].id + '">' + mydata[i].areaName + '</option>')
            }
        });
        return false;
    }

    /*货区-停用*/
    function member_stop(obj,id){
        $.post('/area/updateStatus',{'id':id,"areaStatus":2}, function () {
            layer.confirm('确认要停用吗？', function (index) {
                $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,\''+id+'\')" href="javascript:;" title="启用"><i class="icon-ok bigger-120"></i></a>');
                $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
                $(obj).remove();
                layer.msg('已停用!', {icon: 5, time: 1000});
            });
        })
    }

    /*货区-启用*/
    function member_start(obj,id){
        $.post('/area/updateStatus',{'id':id,"areaStatus":1}, function () {
            layer.confirm('确认要启用吗？', function (index) {
                $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,\''+id+'\')" href="javascript:;" title="停用"><i class="icon-ok bigger-120"></i></a>');
                $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
                $(obj).remove();
                layer.msg('已启用!', {icon: 6, time: 1000});
            });
        })
    }


</script>
